<template>
	<view>
		<el-tabs v-model="activeName" @tab-click="handleClick" border='none'>
		    <el-tab-pane label="培训课程" name="first">
				<view class="list_box" @click="gotoxiang">
				     <view class="box">
				      <view class="left_img">
				       <image src="../../static/psx/yunqi.png" mode=""></image>
				      </view>
				      <view class="conten_text">
				       <p style="font-size: 34upx;line-height: 60upx;  font-weight: 400;">孕期理疗瑜伽</p >
				       <p style="color: gray;font-size: 28upx;">理疗瑜伽可针对不同孕妈妈的情况对不同部位进行强化锻炼，</p >
				       <view style="display: flex; justify-content: space-between;margin-top: 20upx;">
				        <p style="font-size: 24upx; color: gray;">参与人数500人</p >
				        <p style="color: #8fc31f;font-size: 33upx;">价格￥99.00元</p >
				        <!-- <p v-if="item.state == 0" style="color: #8fc31f;font-size: 37upx;">限时免费</p > -->
				       </view>
				      </view>
				     </view>
				    </view>
			</el-tab-pane>
		    <el-tab-pane label="线下培训" name="second">

				       <view  v-for="item in List" :key="item.id" style="width: 100%;height:200upx;border-bottom: 1px solid #9e9e9e;margin: 0 auto;display: flex;">
				        <view style="width:30%;height: 200upx;">
				         <img style='width: 100%;height: 150upx;margin-top: 32upx;' src='../../static/psx/xianxia.png' />
				        </view>
				        <view style="width:70%;height: 200upx;">
				         <span style='display: block;font-size: 16px;margin-left: 20upx;margin-top: 20upx;'>孕期瑜伽综合培训</span>
				         <span style='display: block;font-size: 12px;margin-left: 18upx;margin-top: 25upx;color: #9e9e9e;'>北京市海淀区光明瑜伽培训</span>
				         <view style="display: flex;margin-top: 10upx;">
				          <span style='display: block;font-size: 11px;margin-left: 20upx;margin-top: 25upx;color: #9e9e9e;-webkit-transform-origin-x: 0; -webkit-transform: scale(0.80);transform:scale(0.8); width: 220px'>2017年6月3日-2017年6月9日</span>
				          <button style="width: 182upx;height:60upx;background:darkgray;margin-right: 10upx;">
				           <span style='font-size:12px;display: block;color: white; '>已经报名</span></button>
				         </view>
				         
				        </view>
				    </view>
			</el-tab-pane>
		  </el-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				List:[]
			}
		},
		created() {
			this.$api.getOffline().then(res=>{
				console.log(res)
			   res.data.forEach(item=>{
				   if(item.state==1){
					   this.List.push(item)
				   }
				   console.log(this.List)
			   })
			   
			})
			
		},
		methods: {
			handleClick(tab, event) {
			        console.log(tab, event);
			      },
				  gotoxiang(){
					  uni.navigateTo({
					  	url: '/pages/Home/lfyCourseTopic'
					  })
				  }
		}
	}
</script>

<style scoped lang="scss"> 
/deep/.el-tabs__nav {
	    display: flex;
	    width: 100%;
	    justify-content: space-around;
}
/deep/.el-tabs__item.is-active {
    color:#67c23a;
}
/deep/.el-tabs__active-bar{
	background-color: #eaeaea;
}
/deep/ .el-tabs__header{
	margin: 0;
}
/* /deep/.el-tabs__active-bar is-top{
	 transform: translateX(210px) !important;
} */
.list_box{
    width: 100%;
    height: 220upx;
    
    background-color: white;
    margin-top: 20upx;
    padding: 0upx 0upx  30upx 0;
    
    .box{
     width: 94%;
     height: 100%;
     margin: 0 auto;
     border-bottom: 1px solid gray;
     display: flex;
     justify-content: space-between;
     padding-bottom: 30upx;
     .left_img{
      width: 300upx;
      height: 210upx;
      image{
       width: 100%;
       height: 100%;
      }
     }
     .conten_text{
      width: 70%;
      height: 100%;
      margin-left: 20upx;
     }
    }
    
   }
</style>
